import React, { Component } from 'react';
import { Tabs } from 'antd-mobile';
import styles from './LampMoney.module.scss';

const tabs = [ { title: '供灯金额' }, { title: '供灯数量' }, { title: '分享次数' } ];
//渲染数量（假数据）
const list = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];

class LampMoney extends Component {
	constructor(props) {
		super(props);
		this.state = {
			TabIndex: 0, //加载组件索引
			unit: '元' //单位
		};
	}
	//渲染内容
	content = (unit) => {
		return (
			<div>
				<div className={`${styles.myself} ${styles.mlist}`}>
					<p className={styles.sort}>344</p>
					<div className={styles.right}>
						<p className={styles.picture}>头像</p>
						<p className={styles.username}>春暖花开</p>
						<p className={styles.number}>0.00{unit}</p>
					</div>
				</div>
				{list.map((item) => {
					return (
						<div className={styles.mlist} key={item}>
							<p className={styles.sort}>
								{item === 1 ? (
									<img src={require('../../image/jinpai@2x.png')} />
								) : item === 2 ? (
									<img src={require('../../image/yinpai@2x.png')} />
								) : item === 3 ? (
									<img src={require('../../image/tongpai@2x.png')} />
								) : (
									item
								)}
							</p>
							<div className={styles.right}>
								<p className={styles.picture}>头像</p>
								<p className={styles.username}>春暖花开</p>
								<p className={styles.number}>0.00{unit}</p>
							</div>
						</div>
					);
				})}
			</div>
		);
	};
	//点击tab
	handleTabs = (index) => {
		console.log(index);
		this.setState({ TabIndex: index }, () => {
			if (index === 0) {
				this.setState({ unit: '元' });
			} else if (index === 1) {
				this.setState({ unit: '盏' });
			} else {
				this.setState({ unit: '次' });
			}
		});
	};
	render() {
		const { TabIndex } = this.state;
		return (
			<div className={styles.tabList} style={{ height: '100%' }}>
				<ul className={styles.tabs}>
					{tabs.map((item, index) => {
						return (
							<div className={styles.tab} key={item.title}>
								<p
									className={TabIndex === index ? styles.active : ''}
									onClick={() => this.handleTabs(index)}
								>
									{/* 供灯金额 */}
									{item.title}
								</p>
							</div>
						);
					})}
				</ul>
				<div className={styles.centerList}>{this.content(this.state.unit)}</div>
				<div className={styles.footer}>
					<p>我要点灯</p>
				</div>

				{/* <Tabs
					tabs={tabs}
					initialPage={0}
					animated={false}
					useOnPan={false}
					tabBarUnderlineStyle={{ border: '1px solid #BE9567' }}
				>
					{this.content('元')}
					{this.content('盏')}
					{this.content('次')}
				</Tabs> */}
			</div>
		);
	}
}

export default LampMoney;
